<template>
  <button
    class="el-button"
    :class="[
      buttonSize ? `el-button--${buttonSize}` : '',
      type ? `el-button--${type}` : ''
    ]"
  >
    <slot />
  </button>
</template>

<script lang="ts">
export default {
  name: "ElButton"
};
</script>

<script lang="ts" setup>
import { computed, withDefaults } from "vue";
import { useGlobalConfig } from "../utils/index";

interface Props{
  size?: "" | "small" | "medium" | "large";
  type?: "" | "primary" | "success" | "danger";
}
const props = withDefaults(defineProps<Props>(), {
  size: "", type: ""
});

const globalConfig = useGlobalConfig();
const buttonSize = computed(() => {
  return props.size || globalConfig.btnSize;
});
</script>

<style lang="scss">
@import "../styles/button.scss";
</style>